<template>
  <div>
    <van-nav-bar title="我的优惠券" left-arrow @click-left="$router.back()" />

    <van-grid :column-num="2">
      <van-grid-item text="通用优惠券" @click="onGeneral" />
      <van-grid-item text="店铺优惠券" @click="onStore" />
    </van-grid>

    <div class="operation">
      <van-cell-group v-for="(k, i) in uncertainty" :key="i" class="money">
        <span class="mn">¥</span>
        <span class="six">{{ k.discounts_price }}</span>
        <div class="discounts">满{{ Math.floor(Math.random() * 1000) }}可用</div>
        <div class="xjy">
          <span class="title">{{ k.discounts_name }}</span>

          <div class="sj">
            有效时间：
            <span>{{ k.start_time || date | relativeTime }}</span> —
            <span>{{ k.end_time || date | relativeTime }}</span>
          </div>
        </div>

        <div class="use">去使用</div>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { getCoupon } from '@/api/my.js'
export default {
  data () {
    return {
      pageNum: 1, // 页码值
      pageSize: 50, // 每页条数
      discounts: [], // 个人优惠券
      goodsDiscounts: [], // 店铺优惠券
      list: {}, // 总数据
      uncertainty: [], // 需要填充数据的假数组
      date: null
    }
  },
  created () {
    this.coupon()
    this.date = new Date()
    // console.log(this.date)
    this.onGeneral()
  },
  mounted () {

  },
  methods: {
    // 点击通用优惠券
    onGeneral () {
      this.uncertainty = this.discounts
    },
    // 点击店铺优惠券
    onStore () {
      this.uncertainty = this.goodsDiscounts
    },
    // 获取优惠券
    async coupon () {
      const { data } = await getCoupon({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
      this.list = data.data

      // 循环每个对象
      this.list.rows.forEach((item) => {
        if (item.sh_shop === null) {
          // 店铺对象为空则为通用优惠券
          this.discounts.push(item)
        } else {
          // 添加店铺优惠券
          this.goodsDiscounts.push(item)
        }
      })

      console.log(this.discounts)
      console.log(this.goodsDiscounts)
      console.log(this.list)
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .van-nav-bar {
  background: linear-gradient(to left, #ff8534, #ee0a24);
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon-arrow-left::before {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
}
/deep/.van-grid-item__text {
  font-size: 28px;
}

.van-cell {
  padding: 10px 40px 5px;
}
.operation {
  padding: 0 15px;
  margin-bottom: 25px;
  position: relative;
  .money {
    border: 1px solid #ee0a24;
    border-top: 5px solid #ee0a24;
    color: rgba(255, 149, 116, 1);
    padding: 50px 0 50px 60px;
    margin-bottom: 10px;
    border-radius: 20px;
    margin-bottom: 13px;
    .discounts {
      font-size: 16px;
      padding-left: 30px;
    }
    .mn {
      font-size: 28px;
      margin-right: 5px;
      font-weight: 800;
    }
    .six {
      font-weight: 600;
      font-size: 60px;
    }
    .xjy {
      font-size: 18px;
      position: absolute;
      top: 20px;
      left: 250px;
      color: #666;
      .title {
        position: absolute;
        top: 10px;
        left: 40px;
        font-size: 34px;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        white-space: nowrap; // 设置不能换行
      }
      .sj {
        position: absolute;
        bottom: -150px;
        left: 40px;
        width: 420px;
        color: rgba(162, 162, 162, 1);
      }
    }
    .use {
      font-size: 18px;
      box-sizing: border-box;
      width: 120px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      background-color: #53c7ca;
      border-radius: 20px;
      text-align: center;
      position: absolute;
      bottom: 90px;
      right: 40px;
    }
  }
}
</style>
